<!-- 包含标题与样式的一个卡片，用于以列表的形式展示一组数据。 -->
<script setup lang="ts">
defineProps<{
  infoList: Array<{
    label: string
    value: string
    isShowNavigationButton?: undefined
  } | {
    label: string
    value: string
    isShowNavigationButton: boolean
  }>
  pictureLabel: string
  pictures: string[]
  desc: string
}>()

defineEmits(['navigate'])
</script>

<template>
  <view class="flex flex-col p-30rpx bg-white rounded-20rpx">
    <view class="text-30rpx leading-30rpx text-secondary font-bold">
      项目信息
    </view>
    <Spacer height="30" />
    <Divider />
    <Spacer height="36" />
    <view v-for="item in infoList" :key="item.label" class="flex justify-between items-center h-28rpx mb-32rpx overflow-visible">
      <view class="flex items-center">
        <view class="flex-shrink-0 text-28rpx leading-28rpx text-tertiary">
          {{ item.label }}：
        </view>
        <view class="text-28rpx leading-28rpx text-secondary">
          {{ item.value }}
        </view>
      </view>
      <RGButton v-if="item.isShowNavigationButton" class="flex-shrink-0" size="small" type="primary" corner="small" @tap="$emit('navigate')">
        <image class="w-29rpx h-29rpx mr-13rpx" src="@/static/images/nav.png" />
        导航
      </RGButton>
    </view>
    <view>
      <view class="flex-shrink-0 text-28rpx leading-28rpx text-tertiary">
        {{ pictureLabel }}
      </view>
      <Spacer height="24" />
      <PictureGrid mode="display" :width="630" :cols="3" :pictures="pictures" />
    </view>
    <Spacer height="24" />
    <view>
      <view class="flex-shrink-0 text-28rpx leading-28rpx text-tertiary">
        具体要求
      </view>
      <Spacer height="24" />
      <ListParagraph>{{ desc }}</ListParagraph>
    </view>
  </view>
</template>
